<template>
  <div class=''>
    <el-dialog :model-value="props.orderVisiable" :show-close="true" title="关闭订单" width="40%" :before-close="handleClose">
      <span>操作备注：</span>
      <el-input v-model="txtValue" :autosize="{ minRows: 2, maxRows: 4 }" type="textarea" placeholder="请输入备注" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="cancel">取消</el-button>
          <el-button type="primary" @click="submit">
            确定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import * as orderDetail from "@/request/oms_orderDetail"
import { useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from "vue"
const props = defineProps(["orderVisiable", "orderID", "closeIds"])
const emits = defineEmits()
const route = useRoute()
const handleClose = () => {
  txtValue.value = ""
  emits("closeOrderVisiable")
}
const txtValue = ref("")
const submit = () => {
  ElMessageBox.confirm(
    '您确定要关闭订单吗吗？',
    '关闭提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      let id = props.orderID ? props.orderID : props.closeIds ? props.closeIds : route.query.id as string
      if (Array.isArray(id)) {
        id = id.join(",")
        console.log(id);
      }
      orderDetail.closeOrderByIds({ ids: id, note: txtValue.value }).then(res => {
        if (res.code === 200) {
          ElMessage.success("关闭订单成功")
        } else {
          ElMessage.error(res.message)
        }
      }).finally(() => {
        handleClose()
        emits("getOrderDetail")
      })
    })
    .catch(() => {
      ElMessage.success("您已取消关闭订单")
    })
}
const cancel = () => {
  emits("closeOrderVisiable")
}
</script>

<style lang="less" scoped></style>